@color-nav: #3c3f41;
@color-nav-active: #515658;

@aside-width: 140px;


.color-font(@color-font: white) {
    color: @color-font;
}
.border(@size:1px;@color: black) {
    border: @size solid @color
}
.wrap{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.nav-item(@height:40px;@padding:0 30px;) {
    .item{
        height: @height;
        line-height: @height; padding: @padding;
        .color-font();
        position: relative;
        &:before{
            content: '';
            display: block;
            width: 0;height: 100%;
            background: @color-nav-active;
            position: absolute;top: 0;left: 50%;
            transition: all .2s;
        }
        &:hover{
            &::before{
                width: 100%;left:0;
            }
        }
        p{
            position: relative;
            z-index: 2;
        }
    }
    .item-active{
        background: @color-nav-active;
    }
}
